<script setup lang="ts">
// 参考 https://gsap.com/demos?page=1
// https://stackblitz.com/@gsap-dev/collections/gsap-vue3-starters

/*
参考 gsap 官方文档： https://gsap.com/resources/get-started/
gsap 需要一个方法、一个目标和一个 vars 对象，它们都包含动画的相关信息
可用的过渡动画方法有：
  gsap.from()    // 从某个元素的当前状态开始动画
  gsap.to()      // 到某个元素的目标状态动画
  gsap.fromTo()  // 从某个元素的当前状态到目标状态动画
  gsap.set()     // 设置某个元素的属性值



gsap.to(target, {
  // 这是 vars 对象，它包含要进行动画处理的属性
  x: 200,
  rotation: 360,
  // 和特殊属性 如 ease、duration、delay、repeat 和 repeatDelay 都可以放在这里
  duration: 2
})

// 如何选择 gsap 动画的目标？
// 使用 类名 或 ID 选择器
gsap.to(".box", { x: 200 });

// 使用复杂的 CSS 选择器
gsap.to("section > .box", { x: 200 });

// 使用一个变量
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// 甚至可以使用一个元素数组作为目标
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");

gsap.to([square, circle], { x: 200 })


transform: rotate(360deg) translateX(10px) translateY(50%);
等效于：
{ rotation: 360, x: 10, yPercent: 50 }

*/


import { ref } from 'vue'; // 导入组合式API需要的函数
import { gsap } from 'gsap'; // 导入GSAP库

// 使用 ref 创建对 DOM 元素的引用，用于引用要动画的元素。
const box = ref(null);

// 使用 gsap.to() 方法
const animateTo = () => {
  // 从当前位置开始动画，到目标位置 (x: 100, rotation: 360)
  gsap.to(box.value, { duration: 1, x: 100, rotation: 360 });
};

// 使用 gsap.from() 方法
const animateFrom = () => {
  // 从指定位置 (y: -50, opacity: 0) 开始动画
  gsap.from(box.value, { duration: 1, y: -50, opacity: 0 });
};

// 使用 gsap.fromTo() 方法
const animateFromTo = () => {
  // 从指定位置 (x: 0, opacity: 0) 到目标位置 (x: 100, opacity: 1)
  gsap.fromTo(box.value,
      { x: 0, opacity: 0 },
      { duration: 1, x: 100, opacity: 1 }
  );
};

// 使用 gsap.set() 方法
const animateSet = () => {
  // 设置元素的 x 和 rotation 属性
  gsap.set(box.value, { x: 100, rotation: 360 });
};

// 使用 gsap.timeline() 创建时间轴动画
const createTimeline = () => {
  // 创建一个时间轴动画
  const tl = gsap.timeline();
  // 添加动画到时间轴
  tl.to(box.value, { duration: 1, x: 100 })
      .to(box.value, { duration: 1, rotation: 360 })
      .to(box.value, { duration: 1, scale: 0.5 });
};

// 组件挂载完成后，调用动画函数
onMounted(() => {
  gsap.to(box.value, { /* 动画定义 */ });
});
</script>

<template>
  <div class="space-y-5">
    <div>
      <div ref="box" class="box">GSAP Animation</div>

      <el-button type="primary" @click="animateTo">Move Right</el-button>
      <el-button type="primary" @click="animateFrom">Animate From</el-button>
      <el-button type="primary" @click="animateFromTo">From To Animation</el-button>
      <el-button type="primary" @click="animateSet">Set Animation</el-button>
      <el-button type="primary" @click="createTimeline">Create Timeline</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}
</style>